<template>
  <div class="article-page-middle">
    <head-t class="head" content="Abstract"></head-t>
    <div class="abstract" v-html="abstract">
    </div>
    <div v-if="sim" class="show-more" @click="simClick">
      <p>
        Show All Abstract
      </p>
    </div>
  </div>
</template>

<script>
import HeadT from '@/components/HeadTemp';

export default {
  name: "ArticlePageMiddle",
  props: {
    msg: {
      abstract: String
    }
  },
  data() {
    return {
      sim: true,
    };
  },
  computed: {
    abstract() {
      if (this.sim && this.msg.abstract.length > 1000) {
        return this.msg.abstract.substr(0, 1000) + '...';
      }
      this.sim = false;
      return this.msg.abstract;
    }
  },
  created() {

  },
  mounted() {

  },
  watch: {

  },
  methods: {
    simClick() {
      this.sim = false;
    }
  },
  components: {
    HeadT,
  },
};
</script>

<style scoped lang="scss">
.article-page-middle {
  flex-direction: column;
  font-family: 'Source Sans Pro', sans-serif;
  border: 1px rgba(202, 202, 202, 0.322) solid;
  background-color: rgba(236, 236, 236, 0.199);
  border-radius: 10px;

  .head {
    margin-left: 1px;
  }
  
  .abstract {
    @media screen and (max-width: 400px){
      word-break: break-all;
    }
    font-family: 'Lato', sans-serif;
    line-height: 33px;
    font-size: 17px;
    padding: 10px 42px;
  }

  .show-more {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    margin-top: 4px;
    cursor: pointer;
    p {
      color: rgb(70, 104, 20);
      padding: 10px 15px;
      border-top: 1px solid rgb(0, 201, 0);
      border-bottom: 1px solid rgb(0, 201, 0);
    }
  }
}
</style>
